<template>
    <div class="box" style="margin-bottom:0">
        <van-nav-bar title="文章详情" left-arrow @click-left="$router.go(-1)" fixed></van-nav-bar>
        <div class="line"></div>
        <van-cell :title="artObj.title" size="large" :border="false">
            <template #label>
                <div class="titleBox">
                    <div class="left">
                        <div>
                            <van-image class="img" fit="cover" round :src="artObj.aut_photo" />
                        </div>
                        <div class="textBox">
                            <div>{{  artObj.aut_name  }}</div>
                            <div>{{  $utils.timeAgo(artObj.pubdate)  }}</div>
                        </div>
                    </div>

                    <div class="right">
                        <van-button type="info" size="mini" v-if="artObj.is_followed" @click="followedFn(true)">已关注
                        </van-button>
                        <van-button type="default" size="mini" v-else @click="followedFn(false)">
                            <van-icon name="plus" />关注
                        </van-button>
                    </div>
                </div>
            </template>
        </van-cell>
        <van-divider />

        <van-cell title="" size="large" :border="false">
            <template #label>
                <div class="htmlBox" v-html="artObj.content"></div>
            </template>
        </van-cell>

        <van-divider v-if="Object.keys(artObj).length > 0">END</van-divider>

        <div class="box likeBox" v-if="Object.keys(artObj).length > 0">
            <van-button type="danger" size="mini" v-if="artObj.attitude === 1" @click="loveFn(true)">
                <van-icon name="good-job-o" />已点赞
            </van-button>
            <van-button type="danger" plain hairline size="mini" v-else @click="loveFn(false)">
                <van-icon name="good-job-o" />点赞
            </van-button>
        </div>
        <!-- 返回artObj中的字段长度 -->
        <van-loading type="spinner" color="#0094ff" size="30" vertical v-else-if="Object.keys(artObj).length === 0">加载中
        </van-loading>

        <div v-if="Object.keys(artObj).length > 0">
            <ComList :is_collected='is_collected' />
        </div>
    </div>
</template>

<script>
import Notify from '@/ui/Notify'
import debounce from '@/utils/debounce.js'
export default {
  name: 'ArticleDetail',
  components: {
    ComList: () => import('./CommentList.vue')
  },
  created () {
    this.getData()
  },
  data () {
    return {
      artObj: {},
      is_collected: false
    }
  },
  methods: {
    async getData () {
      // 获取动态路由上的参数query
      const { data: res } = await this.$api.articlesApi(this.$route.query.art_id)
      this.artObj = res.data
      this.is_collected = this.artObj.is_collected
    },
    followedFn: debounce(async function (e) {
      if (e === false) {
        const { data: res } = await this.$api.followingsAPI({ target: this.artObj.aut_id })
        Notify({ type: 'success', message: res.message })
      } else {
        this.$api.followingsDelAPI(this.artObj.aut_id)
      }
      this.getData()
    }, 500),
    loveFn: debounce(async function (e) {
      if (e === false) {
        const { data: res } = await this.$api.likingsAPI({ target: this.artObj.art_id })
        Notify({ type: 'success', message: res.message })
      } else {
        this.$api.likingsDelAPI(this.artObj.art_id)
      }
      this.getData()
    }, 500)
  }
}
</script>

<style lang="less" scoped>
.box {
    margin-bottom: 20px;
}

/deep/ .van-icon-arrow-left {
    color: #fff;
    font-size: 18px;
}

/deep/ .van-nav-bar__content {
    height: 54px;
}

.line {
    margin-bottom: 54px;
}

.van-cell__title {
    width: 100%;
    text-align: left;
    font-weight: 700;
    overflow: hidden;
    white-space: normal;
}

.van-divider {
    padding: 0 10px;
}

.img {
    width: 60px;
    height: 60px;
}

.van-divider {
    margin: 0;
}

.titleBox {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
        display: flex;
        align-items: center;
        color: #000;
        font-weight: 400;

        .textBox {
            margin-left: 5px;

            div {
                margin-bottom: 2px;
            }
        }
    }
}

.htmlBox {
    font-size: 12px;
    line-height: 24px;
    width: 100%;
    overflow-x: scroll;
    word-break: break-all;

    /deep/ img {
        width: 100%;
    }

    /deep/ pre {
        white-space: pre-wrap;
        word-wrap: break-word;
    }
}

.van-loading {
    text-align: center;
    padding-top: 60px;
}
</style>
